<template>
  <div>
    <el-row style="padding: 20px">
      <el-col :span="9" style="padding: 10px">
        <el-card class="box-card" shadow="hover" v-if="isSave">
          <p>添加标签</p>
          <el-divider />
          <div class="inputGroup">
            <el-input
              v-model="title"
              placeholder="输入标签名称"
              style="padding: 10px"
            />
            <el-input
              v-model="classValue"
              placeholder="输入标签名值(请输入英文，作为路由使用)"
              style="padding: 10px"
            />
            <el-button type="primary" style="margin: 10px" @click="save"
              >保存</el-button
            >
          </div>
        </el-card>

        <el-card class="box-card" shadow="hover" v-else>
          <p>管理分类</p>
          <el-divider />
          <div class="inputGroup">
            <el-input
              v-model="title"
              placeholder="输入标签名称"
              style="padding: 10px"
            />
            <el-input
              v-model="classValue"
              placeholder="输入标签名值(请输入英文，作为路由使用)"
              style="padding: 10px"
            />
            <div style=" display: flex;
                justify-content: space-around;">
                 <el-button-group >
              <el-button type="success" @click="update">更新</el-button>
              <el-button @click="backAdd">返回添加</el-button>
            </el-button-group>
            <span></span>
            <el-button type="danger"  @click="deleteLists"
              >删除</el-button
            >
            </div>
           
          </div>
        </el-card>
      </el-col>
      <el-col :span="15" style="padding: 10px">
        <el-card class="box-card" shadow="hover">
          <p>所有标签</p>
          <el-divider />
          <div style="display: flex; flex-wrap: wrap; flex-shrink: 0">
            <span
              @click="ClickSpans(v)"
              v-for="(v, i) in classLists"
              :key="i"
              style="
                padding: 5px;
                border: 1px solid #ccc;
                margin: 5px;
                height: 30px;
                line-height: 15px;
                color: #000;
                font-size: 14px;
              "
              >{{ v.title }}</span
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { mapMutations } from "vuex";
import { asyncTagLists, asyncAddTagLists, asyncDeleteTagLists } from "../api/tagLists";
export default {
  data() {
    return {
      // 面包屑
      breadList: [],
      title: "",
      classValue: "",
      //   分类数据
      classLists: [],
      // 标签id
      classId:'',
      isSave: true,
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
      this.initTagLists();
    },
    // 初始化列表数据
    async initTagLists() {
      const res = await asyncTagLists("/tagLists");
      this.classLists = res.data.list;
    },
    // 保存添加标签
    async save() {
      this.isSave = true;
      if (this.title === "" && this.classValue === "") {
        ElMessage({
          message: "内容不应该为空",
          type: "warning",
        });
      } else {
        // console.log(this.className,'iii')

        const res = await asyncAddTagLists("/AddTagLists", {
          title: this.title,
          classValue: this.classValue,
        });
        if (res.data.code === 200) {
          this.initTagLists();
            ElMessage({
          message: "标签添加成功",
          type: "success",
        });
        } else {
          ElMessage({
            message: res.data.msg,
            type: "warning",
          });
        }
        //   console.log(res, "ddf");
      }
    },
    // 点击回显
    ClickSpans(v) {
      this.isSave = false;
      this.title = v.title;
      this.classValue = v.classValue;
      this.classId=v.id
    },
    // 删除标签
    async deleteLists(){
      const res=await asyncDeleteTagLists('/deleteTagLists',{id:this.classId});
      console.log(res);
      this.initTagLists();
      if(res.data.code===200){
          ElMessage({
          message: "删除成功",
          type: "success",
        });
      }
    },
    // 返回添加
    backAdd(){
      this.isSave=true;
      this.title='';
      this.classValue=''
    },
     update(){
        this.isSave=true;
        this.title='';
        this.classValue='';
         ElMessage({
          message: "更新成功",
          type: "success",
        });
    }
  },
};
</script>
<style>

</style>